<template>
    <div class="example-pagination-block">
      <div class="example-demonstration">When you have few pages</div>
      <el-pagination layout="prev, pager, next" :total="50" />
    </div>
    <div class="example-pagination-block">
      <div class="example-demonstration">When you have more than 7 pages</div>
      <el-pagination layout="prev, pager, next" :total="1000" />
    </div>
    <p>列表及分页</p>
    <el-table :data="tableData" border style="width: 100%;">
<el-table-column prop="account" label="用户名"></el-table-column>
<el-table-column prop="createTime" label="注册时间"></el-table-column>
<el-table-column prop="level" label="等级"></el-table-column>
    </el-table>
    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[5,10]"
    layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
    @current-change="handleCurrentChange">
    </el-pagination>
  </template>

<script setup>
import {ref} from 'vue'

const data = Array.from(Array(114), (v,i) =>{
    return{
        account:'uaa' + (i+1),
        createTime:new Date(Date.now() + Math.ceil(Math.random() *1000)),
        level:Math.ceil(Math.random() * 10)
    }
})
console.log('data',data);

const tableData = ref([])
const currentPage = ref(1)
const pageSize = ref(5)
const total = ref(0)

const getData = (page,pageSize) =>{
    tableData.value = data.slice((page-1) * pageSize,page * pageSize)
    total.value = data.length
}
getData(1, pageSize.value)

const handleSizeChange = (val) =>{
    console.log('${val} items per page');
    getData(currentPage.value,val)
}
const handleCurrentChange = (val) => {
  console.log('current page: ${val}')
  getData(val,pageSize.value)
}


</script>
  
  <style scoped>



  .example-pagination-block + .example-pagination-block {
    margin-top: 10px;
  }
  .example-pagination-block .example-demonstration {
    margin-bottom: 16px;
  }
  
  </style>
  